import styled from 'styled-components'
import Icon from '@/components/Icon'
export const Wrap = styled.div`
	flex: 0 0 170px;
	display: flex;
	box-sizing: border-box;
	padding-right: 10px;
	overflow: auto;
`
export const OrgTreeItem = styled.div<{ nestingLevel: number; isCascade: boolean }>`
	display: flex;
	align-items: center;
	height: 24px;
	padding-left: ${(props) => {
		if (props.isCascade) {
			return `${props.nestingLevel * 16}px`
		} else {
			return `${props.nestingLevel * 16 + 16}px`
		}
	}};
`
export const OrgTreeItemName = styled.div<{ checked: boolean }>`
	color: ${(props) => (props.checked ? `#fff` : `#4e4e4e`)};
	background-color: ${(props) => (props.checked ? `#3e99ce` : `#fff`)};
	padding: 2px 4px;
	cursor: pointer;
	white-space: nowrap;
	&:hover {
		color: #fff;
		background-color: #3e99ce;
	}
`
export const IconToggleOrgTree = styled(Icon)<{ open: boolean }>`
	width: 14px;
	height: 14px;
	background-position: ${(props) => (props.open ? `0px -1083px` : ` -56px -1083px`)};
	margin-right: 2px;
	flex: 0 0 14px;
`
